<template>
  <div class="app-container">
    <div class="btnCss">
      <el-tabs v-model="active" @tab-click="handleClick">
        <el-tab-pane label="待办任务" name="myWork" >
          <Todo v-if="active == 'myWork'"></Todo>
        </el-tab-pane>
        <el-tab-pane label="已办任务" name="deptWork">
          <Finished v-if="active == 'deptWork'"></Finished>
        </el-tab-pane>
        <el-tab-pane label="应用项目搜索" name="allWork">
          <Gather v-if="active == 'allWork'"></Gather>
        </el-tab-pane>
      </el-tabs>
        <!-- <el-button :class="active==0?'active':''" v-hasPermi="['workflow:process:todobTab']" @click="active=0">待办任务</el-button>
        <el-button :class="active==1?'active':''" v-hasPermi="['workflow:process:finishedTab']" @click="active=1">已办任务</el-button>
        <el-button :class="active==2?'active':''" v-hasPermi="['workflow:process:detailTab']" @click="active=2">应用项目搜索</el-button> -->
    </div>
    <!-- <div v-if="active==0">
        <Todo></Todo>
    </div>
    <div v-if="active==1">
      <Finished></Finished>
    </div>
    <div v-if="active==2">2</div> -->
  </div>
</template>

<script>
import Todo from './components/todo.vue';
import Finished from './components/finished.vue';
import Gather from './components/gather.vue';
export default {
    name:'Merge',
    components: {
      Todo,
      Finished,
      Gather
    },
  data() {
    return {
       active:'myWork',
    };
  },
  // watch:{
  //    $route:{
  //     handler(val) {
        
  //       // console.log(val.query.activeName,'tiaozhuangguoali');
  //       // console.log(this.active,'guolai');
  //        this.$nextTick(() => {
  //          setTimeout(() => {
  //           if (val.query.activeName != null) {
  //             this.active = val.query.activeName;
  //           }
  //       //    if (val.query.activeName != undefined) {
            
  //       //   if (val.query.activeName == 'myWork') {
  //       //     console.log(this.active,'biaoqian');
  //       //     if (this.active != 'first') {
  //       //         this.active = 'first';
  //       //       }
  //       //       console.log(this.active,'变化后');
  //       //       }
  //       //   if (val.query.activeName == 'deptWork' || val.query.activeName == 'allWork') {
  //       //       console.log(this.active,'biaoqian33333');
  //       //       if (this.active != 'third') {
  //       //         this.active = 'third'
  //       //       }
  //       //         console.log(this.active,'变化后333333');
  //       //       }
              
  //       //    } else {
  //       //      this.active = 'first'
  //       //     console.log(this.active,'最终');
  //       //     }
  //         },500)
  //           })
  //     },
  //     immediate: true,
  //     deep:true
  //   },
  // },
  // computed:{
  //   activeName(){
  //     return this.$route.query.activeName;

  //   }

  // },
  activated() {
    this.tabsCode()
  },
  mounted() {
      this.tabsCode()
      //console.log(this.activeName);
      // if(this.$route.query.activeName == 'myWork'){
      //   this.active = 'first';
      // }else if(this.$route.query.activeName == 'deptWork'){
      //   this.active = 'third'
      // }
        // 获取按钮元素数组中第一个.click()
  },
  methods: {
    handleClick(tab, event) {
      this.active = tab.name
    },
    tabsCode() {
      if (this.$route.query.activeName != null) {
        console.log(this.$route.query.activeName,'777');
          this.active = this.$route.query.activeName;
        }
    },
  }
};
</script>

<style lang="scss" scoped>
// .btnCss {
//     ::v-deep .el-button {
//       width: 32%;
//     border: none;
//     border-radius: 0;
// }
// .active {
//     color: #409eff;
//     border-bottom: 2px solid #409eff;

// }
// }


</style>